import React, { PropTypes } from 'react'

import { Form, Button, Row, Col,DatePicker, Radio} from 'antd'
const echarts = require('echarts')

class chart extends React.Component {
  constructor (props) {
    super(props)
    
  }
  legend(){
    return ["CO","NO2","SO2","O3","PM2.5","PM10"]
  }
  xAxis(){
    let array=[]

    this.props.dataSource.map(function(item){
        if(item.timepoint==null){
            return
        }
        array=array.concat(item.timepoint.split(" ")[1])
    })
    return array
  }
  series(){
   
    let co={
        name:'CO',
        type:'line',
        yAxisIndex:1,
        data:[]
    }
    let no2={
        name:'NO2',
        type:'line',
        stack: 'no2',
        data:[]
    }
    let so2={
        name:'SO2',
        type:'line',
        stack: 'so2',
        data:[]
    }
    let o3={
        name:'O3',
        type:'line',
        stack: 'o3',
        data:[]
    }
    let pm25={
        name:'PM2.5',
        type:'line',
        stack: 'pm25',
        data:[]
    }
    let pm10={
        name:'PM10',
        type:'line',
        stack: 'pm10',
        data:[]
    }
    this.props.dataSource.map(function(item){
        if(item.timepoint==null){
            return
        }
        let coValue=item.co<0?"":item.co
        let no2Value=item.no2<0?"":item.no2
        let so2Value=item.so2<0?"":item.so2
        let o3Value=item.o3<0?"":item.o3
        let pm25Value=item.pm25<0?"":item.pm25
        let pm10Value=item.pm10<0?"":item.pm10
        co.data=co.data.concat(coValue)
        no2.data=no2.data.concat(no2Value)
        so2.data=so2.data.concat(so2Value)
        o3.data=o3.data.concat(o3Value)
        pm25.data=pm25.data.concat(pm25Value)
        pm10.data=pm10.data.concat(pm10Value)

    })
    return [co,no2,so2,o3,pm25,pm10]
  }
  initEcharts(){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('charts'));
    const option = {
           
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:this.legend()
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xAxis()
            },
            yAxis: [
                 {
                    name: '单位(μg/m³)',
                    type: 'value',
                },
                {
                    name: 'CO单位(mg/m³)',
                    type: 'value'
                }
            ],
            series: this.series()
        }
    // 绘制图表
    myChart.setOption(option);
  }
  shouldComponentUpdate(nextProps, nextState){

      return nextProps.dataSource.length>0&&this.props.timestamp!=nextProps.timestamp

  }
  componentDidUpdate(){
      if(this.props.dataSource.length>0){
        this.initEcharts()
      }
    
  }
  componentDidMount(){
      
      window.requestAnimationFrame(function() {
        if(this.props.dataSource.length>0){
            this.initEcharts()
        }
      }.bind(this))
  }
  render(){
    if(this.props.dataSource.length==0){
     return (<Row gutter={24}></Row>)
    }
    return (

      <Row gutter={24}>
        <div style={{textAlign:'center',width:'100%',marginBottom:8,fontSize:14,fontWeight:'bold'}}>{localStorage.getItem('station')}</div>
        <div id='charts' style={{width:'100%',height:'300px'}}></div>
      </Row>
    )
  }
}



chart.propTypes = {
 
}

export default chart
